16 / 18

Animated water cycleURL copied

direction: right

sun: {
  shape: circle
  icon: "https://api.iconify.design/mdi:white-balance-sunny.svg"
  style.fill: "#fde68a"
  style.stroke: "#f59e0b"
}
clouds: {
  shape: cloud
  icon: "https://api.iconify.design/mdi:weather-cloudy.svg"
}
ocean: {
  icon: "https://api.iconify.design/mdi:waves.svg"
  style.fill: "#bfdbfe"
}
land: {
  icon: "https://api.iconify.design/mdi:terrain.svg"
  style.fill: "#bbf7d0"
}
groundwater: {
  shape: cylinder
  icon: "https://api.iconify.design/mdi:water-outline.svg"
}

sun -> ocean: evaporation
ocean -> clouds: vapor
clouds -> land: precipitation
land -> groundwater: infiltration
groundwater -> ocean: runoff
land -> clouds: transpiration

scenarios: {
  storm: {
    title.label: Storm season
    (clouds -> land)[0].style.stroke-width: 5
    (ocean -> clouds)[0].style.stroke-width: 5
  }
  drought: {
    title.label: Drought season
    (clouds -> land)[0].style.opacity: 0.2
    (sun -> ocean)[0].style.stroke: "#dc2626"
  }
}
Water Cycle (Animated)
Copied
```d2
---
title: Water Cycle (Animated)
width: 90vw
height: 70vh
layout: elk
animate_interval: 1400
---
direction: right

sun: {
  shape: circle
  icon: "https://api.iconify.design/mdi:white-balance-sunny.svg"
  style.fill: "#fde68a"
  style.stroke: "#f59e0b"
}
clouds: {
  shape: cloud
  icon: "https://api.iconify.design/mdi:weather-cloudy.svg"
}
ocean: {
  icon: "https://api.iconify.design/mdi:waves.svg"
  style.fill: "#bfdbfe"
}
land: {
  icon: "https://api.iconify.design/mdi:terrain.svg"
  style.fill: "#bbf7d0"
}
groundwater: {
  shape: cylinder
  icon: "https://api.iconify.design/mdi:water-outline.svg"
}

sun -> ocean: evaporation
ocean -> clouds: vapor
clouds -> land: precipitation
land -> groundwater: infiltration
groundwater -> ocean: runoff
land -> clouds: transpiration

scenarios: {
  storm: {
    title.label: Storm season
    (clouds -> land)[0].style.stroke-width: 5
    (ocean -> clouds)[0].style.stroke-width: 5
  }
  drought: {
    title.label: Drought season
    (clouds -> land)[0].style.opacity: 0.2
    (sun -> ocean)[0].style.stroke: "#dc2626"
  }
}
```